<template>
  <div style="height:932px;width: 100%;padding: 10px;">
    <div class="box-G0">
      <div id="grid-G0" class="grid-G0 grid-background"></div>
    </div>
    <div class="box-G1">
      <div id="grid-G1" class="grid-G1 grid-background"></div>
    </div>
    <div class="box-G2">
      <div id="grid-G2" class="grid-G2 grid-background">
        <div class="grid-G2-Title">排放口信息</div>
        <a-table
          :pagination="pagination"
          :columns="columns"
          :dataSource="data"
          size="middle"
          :customRow="clickRow"
        />
      </div>
    </div>
    <div class="box-G3">
      <div id="grid-G3" class="grid-G3 grid-background">
        <div
          style="width: 735px;padding: 5px;position: absolute;z-index: 2;background-color:rgba(18, 37, 79, 0.45);;text-align: center;border-radius: 8px;color: #ffffff;font-size: 20px;font-weight: 600;"
        >{{mapTitle}}</div>
      </div>
    </div>
    <div class="box-G4">
      <div id="grid-G4" class="grid-G4 grid-background"></div>
    </div>
    <div class="box-G5">
      <div id="grid-G5" class="grid-G5 grid-background"></div>
    </div>
    <ReturnButton></ReturnButton>
  </div>
</template>
<script>
import ReturnButton from './ReturnButton';
import * as mapOper from '../../scripts/mapOper.js';
let config = require('../../config/config');
import commonOper from '../../scripts/commonOper';

//导入自定义的openlayers.echart模块
import ADLayer from 'openlayers_echart';
var _ = require('lodash');
export default {
  name: 'R1',
  data() {
    return {
      r1map: null,
      mapTitle: '乌海市排放监测点分布图',
      G0Chart: null,
      g0option: {
        timeline: {
          data: [],
          axisType: 'category',
          autoPlay: true,
          playInterval: 6000,
          left: '10%',
          right: '10%',
          bottom: '1%',
          width: '80%',
          label: {
            normal: {
              textStyle: {
                color: '#ddd'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          symbolSize: 10,
          lineStyle: {
            color: '#555'
          },
          checkpointStyle: {
            borderColor: '#777',
            borderWidth: 2
          },
          controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            normal: {
              color: '#666',
              borderColor: '#666'
            },
            emphasis: {
              color: '#aaa',
              borderColor: '#aaa'
            }
          }
        },
        baseOption: {
          animation: true,
          animationDuration: 1000,
          animationEasing: 'cubicInOut',
          animationDurationUpdate: 1000,
          animationEasingUpdate: 'cubicInOut',
          grid: {
            left: '3%',
            right: '4%',
            containLabel: true,
            bottom: '15%'
          },
          tooltip: {
            trigger: 'axis', // hover触发器
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
              shadowStyle: {
                color: 'rgba(150,150,150,0.1)' //hover颜色
              }
            }
          }
        },
        options: []
      },
      G1Chart: null,
      g1option: {
        title: {
          top: '0',
          left: 'center',
          text: '内蒙古华电乌达热电有限公司2号废气排口监控点浓度监测',
          textStyle: {
            align: 'center',
            color: '#FFFFFF'
            //fontSize: 16
          }
        },
        //backgroundColor: '#043491',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          x: 'center',
          y: '40px',
          textStyle: {
            color: '#f2f2f2',
            fontSize: 13
          },
          icon: 'circle',
          data: ['烟尘浓度', '二氧化硫浓度', '氮氧化物浓度']
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 20,
            left: '10%',
            right: '10%',
            bottom: '2%',
            start: 50,
            end: 100,
            textStyle: {
              color: '#d4ffff',
              fontSize: 11
            }
          },
          {
            type: 'inside'
          }
        ],
        grid: {
          right: '5%',
          bottom: '10%',
          left: '2%',
          top: '80px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            name: '时间',
            nameTextStyle: {
              color: '#d4ffff'
            },
            axisLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#FFF',
                fontSize: 12
              }
              //interval:0,
              //rotate:30
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '毫克/立方米',
            nameTextStyle: {
              color: '#d4ffff'
            },
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            axisLabel: {
              color: '#d4ffff',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: '烟尘浓度',
            type: 'line',
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#FC30EE'
              }
            },
            data: []
          },
          {
            name: '二氧化硫浓度',
            type: 'line',
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#0EF100'
              }
            },
            data: []
          },
          {
            name: '氮氧化物浓度',
            type: 'line',
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#F49F42'
              }
            },
            data: []
          }
        ]
      },
      G3Chart: null,
      G4Chart: null,
      data: [],
      columns: [
        {
          title: '排放口',
          dataIndex: 'pwk'
        },
        {
          title: '企业名称',
          dataIndex: 'qymc'
        },
        {
          title: '排放种类',
          dataIndex: 'pfzl'
        }
      ],
      pagination: {
        pageSize: 10
      },

      g4option: {
        title: [
          {
            text: '累计排放占比',
            subtext: '',
            x: 'center',
            y: 'top',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: 'white'
            }
          }
        ],
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: '0%',
          data: ['烟尘', '二氧化硫', '氮氧化物'],
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            type: 'pie',
            selectedMode: 'single',
            center: ['50%', '50%'],
            radius: ['28%', '64%'],
            color: ['#FC30EE', '#0EF100', '#F49F42'],
            label: {
              normal: {
                formatter: '{b|{b}}\n{hr|}\n{d|{d}%}',
                rich: {
                  b: {
                    fontSize: 12,
                    color: '#fff',
                    align: 'center',
                    padding: 4
                  },
                  hr: {
                    borderColor: '#12EABE',
                    width: '100%',
                    borderWidth: 2,
                    height: 0
                  },
                  d: {
                    fontSize: 12,
                    color: '#fff',
                    align: 'center',
                    padding: 4
                  },
                  c: {
                    fontSize: 12,
                    color: '#fff',
                    align: 'center',
                    padding: 4
                  }
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 15,
                length2: 15,
                lineStyle: {
                  type: 'dashed',
                  width: 2
                }
              }
            },

            data: []
          }
        ]
      },
      G5Chart: null,
      g5option: {
        //backgroundColor:'#323a5e',
        title: {
          top: '0',
          left: 'center',
          text: '内蒙古华电乌达热电有限公司2号废气排口监控点年度排放统计',
          textStyle: {
            align: 'center',
            color: '#FFFFFF'
            //fontSize: 16
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        legend: {
          data: ['烟尘', '二氧化硫', '氮氧化物'],
          right: 10,
          top: 12,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        xAxis: {
          type: 'category',
          data: [
            '2012',
            '2013',
            '2014',
            '2015',
            '2016',
            '2017',
            '2018',
            '2019'
          ],
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei'
            }
          }
        },

        yAxis: {
          type: 'value',
          //max:'1200',
          name: '千克',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {}
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: '8%',
            start: 10,
            end: 90,
            handleIcon:
              'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: '#d3dee5'
            },
            textStyle: {
              color: '#fff'
            },
            borderColor: '#90979c'
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            name: '烟尘',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#fccb05'
                  },
                  {
                    offset: 1,
                    color: '#f5804d'
                  }
                ]),
                barBorderRadius: 12
              }
            },
            data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
          },
          {
            name: '二氧化硫',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#8bd46e'
                  },
                  {
                    offset: 1,
                    color: '#09bcb7'
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
          },
          {
            name: '氮氧化物',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#248ff7'
                  },
                  {
                    offset: 1,
                    color: '#6851f1'
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
          }
        ]
      },
      m1MapOption: {
        series: [
          {
            name: '监测点',
            type: 'effectScatter',

            encode: {
              value: 2
            },
            data: [],
            symbolSize: function(val) {
              if (val > 40) {
                return val[2] / 2;
              } else {
                return 10;
              }
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'bottom',
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#009966',
                shadowBlur: 10,
                shadowColor: '#009966'
              }
            },
            zlevel: 1
          }
        ]
      }
    };
  },
  components: {
    ReturnButton
  },
  mounted() {
    this.r1map = mapOper.initBlankMap('grid-G3');
    var container = document.getElementById('biaozhu');
    let markerSetting = {
      map: this.r1map,
      element: container
    };
    mapOper.addMarker(markerSetting);
    this.initPFKData();
    this.$nextTick(() => {
      //this.initMap();
      this.initG0Charts();
      this.initG1Charts();

      this.initG4Charts();
      this.initG5Charts();
      this.updataG1ChartsData(
        'QY_0114_002',
        '内蒙古华电乌达热电有限公司',
        '2号废气排口监控点'
      );
      this.getChart1Data();
    });
  },
  methods: {
    clickRow(record) {
      return {
        on: {
          click: () => {
            //console.log(record, index);
            this.updataG1ChartsData(
              record.key,
              record.fullname,
              record.fullpfkname
            );
            let fparams = {
              map: this.r1map,
              center: record.geom.coordinates,
              zoom: 9
            };
            mapOper.drawFeaturesAndZoom(fparams);
            // let params = {
            //   map: this.r1map,
            //   center: record.geom.coordinates,
            //   zoom: 9
            // };
            // mapOper.ZoomAndCenter(params);
          }
        }
      };
    },
    initPFKData() {
      let that = this;
      let param = {
        this: that,
        url: config.webapiUrl + '/qyjcd/getAllJcd',
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            let tabledata = [];
            _.forEach(response.data.data, function(value) {
              let name = value.qyname;
              let pfk = value.qypwk;
              if (pfk.length > 12) {
                pfk = pfk.substring(0, 12) + '...';
              }
              if (name.length > 11) {
                name = name.substring(0, 11) + '...';
              }
              tabledata.push({
                key: value.jcdbh,
                pwk: pfk,
                qymc: name,
                pfzl: 'SO₂,NOⅹ,颗粒物',
                fullname: value.qyname,
                fullpfkname: value.qypwk,
                geom: JSON.parse(value.geom)
                //pfbz:'SO₂标准：'+value.so2bz+',NOx标准：'+value.noxbz+',颗粒物标准：'+value.klwbz
              });
            });
            that.data = tabledata;
            let m1data = [];
            let uniq = _.uniqBy(tabledata, function(o) {
              return o.fullname;
            });

            _.forEach(uniq, function(o) {
              m1data.push({
                name: o.qyname,
                value: [o.geom.coordinates[0], o.geom.coordinates[1], o.ll]
              });
            });
            this.m1MapOption.series[0].data = m1data;
            var oe = new ADLayer(this.m1MapOption, this.r1map, this.$echarts);
            oe.render();
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    },
    initG0Charts: function() {
      let that = this;
      var voltageLevel = ['烟尘', '二氧化硫', '氮氧化物'];
      that.g0option.timeline.data = voltageLevel;
      let chartDiv = document.getElementById('grid-G0');
      that.G0Chart = that.$echarts.init(chartDiv);
      that.G0Chart.setOption(that.g0option);
      window.onresize = that.G0Chart;
    },
    initG1Charts: function() {
      let that = this;
      let chartDiv = document.getElementById('grid-G1');
      that.G1Chart = that.$echarts.init(chartDiv);
      that.G1Chart.setOption(that.g1option);
      window.onresize = that.G1Chart;
    },
    updataG1ChartsData(jcdbh, qyname, jcdname) {
      let that = this;
      let param = {
        this: that,
        url:
          config.webapiUrl +
          '/qyjcdrecord/getAllJcdRecordByJcdBh?jcdbh=' +
          jcdbh,
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            let xdata = [];
            let ycnd = [];
            let sond = [];
            let nond = [];
            let totlaycnd = 0;
            let totlasond = 0;
            let totlanond = 0;
            let chart5tempdata = [];
            let yearlist = [];
            _.forEach(response.data.data, function(value) {
              ycnd.push(value.ycnd);
              totlaycnd += value.ycpl;
              sond.push(value.sotwond);
              totlasond += value.sotwopl;
              nond.push(value.nond);
              totlanond += value.nopl;
              xdata.push(
                value.jcyear + '年' + value.jcmoonth + '月' + value.jcday + '日'
              );
              yearlist.push(value.jcyear + '年');
              chart5tempdata.push({
                syear: value.jcyear + '年',
                ycpl: value.ycpl,
                sopl: value.sotwopl,
                nopl: value.nopl
              });
            });
            //chart1数据
            that.g1option.title.text = qyname + jcdname + '浓度监测';
            that.g1option.xAxis[0].data = xdata;
            that.g1option.series[0].data = ycnd;
            that.g1option.series[1].data = sond;
            that.g1option.series[2].data = nond;
            that.G1Chart.setOption(that.g1option);
            window.onresize = that.G1Chart;
            //chart4数据
            that.g4option.series[0].data = [
              { name: '烟尘', value: totlaycnd.toFixed(2) },
              { name: '二氧化硫', value: totlasond.toFixed(2) },
              { name: '氮氧化物', value: totlanond.toFixed(2) }
            ];
            that.G4Chart.setOption(that.g4option);
            window.onresize = that.G4Chart;
            //chart5数据
            that.g5option.title.text = qyname + jcdname + '年度排放统计';
            let uniqyear = _.uniq(yearlist);
            that.g5option.xAxis.data = uniqyear;

            let group5data = _.groupBy(chart5tempdata, function(o) {
              return o.syear;
            });
            let ycplarr = [];
            let soplarr = [];
            let noplarr = [];
            _.forEach(uniqyear, function(value) {
              //console.log(group5data[value]);
              let sumycpl = _.sumBy(group5data[value], function(o) {
                return o.ycpl;
              });
              ycplarr.push(sumycpl.toFixed(2));
              let sumsopl = _.sumBy(group5data[value], function(o) {
                return o.sopl;
              });
              soplarr.push(sumsopl.toFixed(2));
              let sumnopl = _.sumBy(group5data[value], function(o) {
                return o.nopl;
              });
              noplarr.push(sumnopl.toFixed(2));
            });
            that.g5option.series[0].data = ycplarr;
            that.g5option.series[1].data = soplarr;
            that.g5option.series[2].data = noplarr;
            that.G5Chart.setOption(that.g5option);
            window.onresize = that.G5Chart;
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    },

    // initMap() {
    //   let that = this;

    //   this.r1map = mapOper.initBlankMap('grid-G3');

    //   let param = {
    //     this: that,
    //     url: config.webapiUrl + '/qyjcd/getJcdDailyPf',
    //     successFunc: response => {
    //       if (response.status === 200 && response.data.data) {
    //         console.log(response.data.data);
    //         let m1data = [];
    //         let uniq = _.uniqBy(response.data.data.features, function(o) {
    //           return o.properties.qyname;
    //         });
    //         //console.log(uniq);
    //         _.forEach(uniq, function(o) {
    //           m1data.push({
    //             name: o.properties.qyname,
    //             value: [
    //               o.geometry.coordinates[0],
    //               o.geometry.coordinates[1],
    //               o.properties.nopl
    //             ]
    //           });
    //         });
    //         this.m1MapOption.series[0].data = m1data;
    //         var oe = new ADLayer(this.m1MapOption, this.r1map, this.$echarts);
    //         oe.render();
    //       }
    //     },
    //     failFunc: response => {
    //       let params = {
    //         this: that,
    //         title: '提示',
    //         message: '网络连接错误！' + response,
    //         type: 'warning'
    //       };
    //       commonOper.Notification(params);
    //     }
    //   };

    //   commonOper.HttpGet(param);
    // },
    initG4Charts: function() {
      let chartDiv = document.getElementById('grid-G4');
      this.G4Chart = this.$echarts.init(chartDiv);

      this.G4Chart.setOption(this.g4option);
      window.onresize = this.G4Chart;
    },
    initG5Charts: function() {
      let chartDiv = document.getElementById('grid-G5');
      this.G5Chart = this.$echarts.init(chartDiv);
      this.G5Chart.setOption(this.g5option);
      window.onresize = this.G5Chart;
      var app = {
        currentIndex: -1
      };
      setInterval(() => {
        var dataLen = this.g5option.series[0].data.length;

        // 取消之前高亮的图形
        this.G5Chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        //console.log(app.currentIndex);
        // 高亮当前图形
        this.G5Chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
        // 显示 tooltip
        this.G5Chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
      }, 3000);
    },
    getChart1Data() {
      let that = this;
      let param = {
        this: that,
        url: config.webapiUrl + '/qyjcdrecord/getTop5Yqpfl',
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            let chart1data = [];
            _.forEach(response.data.data, function(value) {
              chart1data.push({
                qybh: value.qybh,
                qyname: value.qyname,
                ycpl: Number(value.ycpl),
                nopl: Number(value.nopl),
                sotwopl: Number(value.sotwopl)
              });
            });
            let yclist = _.orderBy(chart1data, ['ycpl'], ['desc']);
            let solist = _.orderBy(chart1data, ['sotwopl'], ['desc']);
            let nolist = _.orderBy(chart1data, ['nopl'], ['desc']);
            //console.log(yclist);
            //let yearlistdata = this.gridL1Option.timeline.data;
            //烟尘
            this.g0option.options.push({
              title: {
                text: '烟尘实时排放Top5',
                subtext: '单位：千克',
                x: 'center',
                textStyle: {
                  color: '#ffffff'
                }
              },
              xAxis: {
                type: 'value',
                scale: true,
                position: 'top',
                min: 0,
                boundaryGap: false,
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  margin: 2,
                  textStyle: {
                    color: '#aaa'
                  }
                }
              },
              yAxis: {
                type: 'category',
                data: [
                  yclist[4].qyname,
                  yclist[3].qyname,
                  yclist[2].qyname,
                  yclist[1].qyname,
                  yclist[0].qyname
                ],
                axisLine: {
                  lineStyle: {
                    color: '#ddd'
                  }
                },
                axisLabel: {
                  interval: 0,
                  formatter: function(params) {
                    var newParamsName = '';
                    var paramsNameNumber = params.length;
                    var provideNumber = 10;
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                      for (var p = 0; p < rowNumber; p++) {
                        var tempStr = '';
                        var start = p * provideNumber;
                        var end = start + provideNumber;
                        if (p == rowNumber - 1) {
                          tempStr = params.substring(start, paramsNameNumber);
                        } else {
                          tempStr = params.substring(start, end) + '\n';
                        }
                        newParamsName += tempStr;
                      }
                    } else {
                      newParamsName = params;
                    }
                    return newParamsName;
                  }
                }
              },
              series: [
                {
                  name: '烟尘',
                  type: 'bar',
                  // itemStyle: {
                  //   normal: {
                  //     color: '#91CA8C',
                  //     shadowBlur: 5,
                  //     shadowColor: '#91CA8C'
                  //   }
                  // },
                  itemStyle: {
                    normal: {
                      color: function(params) {
                        var colorList = [
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#f0515e'
                              },
                              {
                                offset: 1,
                                color: '#ef8554'
                              }
                            ]
                          },
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#3c38e4'
                              },
                              {
                                offset: 1,
                                color: '#24a5cd'
                              }
                            ]
                          }
                        ];
                        if (params.dataIndex < 3) {
                          return colorList[1];
                        } else {
                          return colorList[0];
                        }
                      },
                      barBorderRadius: [0, 15, 15, 0]
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      textBorderColor: '#333',
                      textBorderWidth: 2
                    }
                  },
                  data: [
                    yclist[4].ycpl,
                    yclist[3].ycpl,
                    yclist[2].ycpl,
                    yclist[1].ycpl,
                    yclist[0].ycpl
                  ]
                }
              ]
            });
            this.g0option.options.push({
              title: {
                text: '二氧化硫实时排放Top5',
                subtext: '单位：千克',
                x: 'center',
                textStyle: {
                  color: '#ffffff'
                }
              },

              xAxis: {
                type: 'value',
                scale: true,
                position: 'top',
                min: 0,
                boundaryGap: false,
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  margin: 2,
                  textStyle: {
                    color: '#aaa'
                  }
                }
              },
              yAxis: {
                type: 'category',
                data: [
                  solist[4].qyname,
                  solist[3].qyname,
                  solist[2].qyname,
                  solist[1].qyname,
                  solist[0].qyname
                ],
                axisLine: {
                  lineStyle: {
                    color: '#ddd'
                  }
                }
              },
              series: [
                {
                  name: '二氧化硫',
                  type: 'bar',
                  // itemStyle: {
                  //   normal: {
                  //     color: '#9D96F5',
                  //     shadowBlur: 5,
                  //     shadowColor: '#9D96F5'
                  //   }
                  // },
                  itemStyle: {
                    normal: {
                      color: function(params) {
                        var colorList = [
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#f0515e'
                              },
                              {
                                offset: 1,
                                color: '#ef8554'
                              }
                            ]
                          },
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#3c38e4'
                              },
                              {
                                offset: 1,
                                color: '#24a5cd'
                              }
                            ]
                          }
                        ];
                        if (params.dataIndex < 3) {
                          return colorList[1];
                        } else {
                          return colorList[0];
                        }
                      },
                      barBorderRadius: [0, 15, 15, 0]
                    }
                  },
                  data: [
                    solist[4].sotwopl,
                    solist[3].sotwopl,
                    solist[2].sotwopl,
                    solist[1].sotwopl,
                    solist[0].sotwopl
                  ]
                }
              ]
            });
            this.g0option.options.push({
              title: {
                text: '氮氧化物实时排放Top5',
                subtext: '单位：千克',
                x: 'center',
                textStyle: {
                  color: '#ffffff'
                }
              },

              xAxis: {
                type: 'value',
                scale: true,
                position: 'top',
                min: 0,
                boundaryGap: false,
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  margin: 2,
                  textStyle: {
                    color: '#aaa'
                  }
                }
              },
              yAxis: {
                type: 'category',
                data: [
                  nolist[4].qyname,
                  nolist[3].qyname,
                  nolist[2].qyname,
                  nolist[1].qyname,
                  nolist[0].qyname
                ],
                nameGap: 16,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#ddd'
                  }
                },
                axisTick: {
                  show: false,
                  lineStyle: {
                    color: '#ddd'
                  }
                },
                axisLabel: {
                  interval: 0,
                  textStyle: {
                    color: '#ddd'
                  }
                }
              },
              series: [
                {
                  name: '氮氧化物',
                  type: 'bar',
                  // itemStyle: {
                  //   normal: {
                  //     color: '#7289AB',
                  //     shadowBlur: 5,
                  //     shadowColor: '#7289AB'
                  //   }
                  // },
                  itemStyle: {
                    normal: {
                      color: function(params) {
                        var colorList = [
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#f0515e'
                              },
                              {
                                offset: 1,
                                color: '#ef8554'
                              }
                            ]
                          },
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#3c38e4'
                              },
                              {
                                offset: 1,
                                color: '#24a5cd'
                              }
                            ]
                          }
                        ];
                        if (params.dataIndex < 3) {
                          return colorList[1];
                        } else {
                          return colorList[0];
                        }
                      },
                      barBorderRadius: [0, 15, 15, 0]
                    }
                  },
                  data: [
                    nolist[4].nopl,
                    nolist[3].nopl,
                    nolist[2].nopl,
                    nolist[1].nopl,
                    nolist[0].nopl
                  ]
                }
              ]
            });
            this.G0Chart.setOption(this.g0option);
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    }
  }
};
</script>

<style>
.box-G0 {
  width: 29.5%;
  float: left;
  padding: 2px;
  border: 1px solid #20558b;
  margin-bottom: 10px;
  margin-right: 10px;
  box-sizing: border-box;
  background: linear-gradient(to left, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to bottom, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}
.grid-G0 {
  height: 300px;
}
.box-G1 {
  width: 39.5%;
  float: left;
  padding: 2px;
  border: 1px solid #20558b;
  margin-bottom: 10px;
  box-sizing: border-box;
  background: linear-gradient(to left, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to bottom, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}
.grid-G1 {
  height: 300px;
}
.box-G2 {
  width: 30%;
  float: right;
  padding: 2px;
  border: 1px solid #20558b;
  margin-bottom: 10px;
  box-sizing: border-box;
  background: linear-gradient(to left, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to bottom, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}
.grid-G2 {
  padding: 25px;
  height: 610px;
}
.grid-G2-Title {
  font-size: 16px;
  color: rgb(255, 255, 255);
  text-align: center;
}
.box-G3 {
  width: 39.5%;
  float: left;
  padding: 2px;
  border: 1px solid #20558b;
  box-sizing: border-box;
  background: linear-gradient(to left, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to bottom, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}
.grid-G3 {
  height: 590px;
}
.box-G4 {
  margin-left: 10px;
  margin-bottom: 10px;
  width: 29.5%;
  float: left;
  padding: 2px;
  border: 1px solid #20558b;
  box-sizing: border-box;
  background: linear-gradient(to left, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to bottom, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}
.grid-G4 {
  height: 290px;
}
.box-G5 {
  width: 60%;
  float: right;
  padding: 2px;
  border: 1px solid #20558b;
  box-sizing: border-box;
  background: linear-gradient(to left, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to bottom, #00d3e7, #00d3e7) left top no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat,
    linear-gradient(to left, #00d3e7, #00d3e7) right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}
.grid-G5 {
  height: 280px;
  float: right;
}
.ant-table table {
  text-align: center;
}
.ant-table {
  color: #bfbfbf;
}
.ant-table-thead > tr > th {
  background: #fafafa00;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  text-align: center;
  color: #bfbfbf;
  font-weight: 500;
  border-bottom: 1px solid rgba(232, 232, 232, 0.37);
}
.ant-table-tbody > tr > td {
  border-bottom: 1px solid #fafafa66;
}
.ant-table-tbody > tr:hover > td {
  background-color: #122752 !important;
  cursor: pointer;
}
.ant-pagination.mini .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination.mini .ant-pagination-next .ant-pagination-item-link {
  border-color: #fafafa;
  background: #141e45;
}
.ant-pagination-disabled a,
.ant-pagination-disabled:hover a,
.ant-pagination-disabled:focus a,
.ant-pagination-disabled .ant-pagination-item-link,
.ant-pagination-disabled:hover .ant-pagination-item-link,
.ant-pagination-disabled:focus .ant-pagination-item-link {
  border-color: #d9d9d9;
  color: #fafafa;
  cursor: not-allowed;
}
.ant-pagination-item {
  background-color: #141f47;
}
.ant-pagination-item-active {
  border-color: #d9d9d9;
}
.ant-pagination-item-active a {
  color: #fafafa;
}
.ant-pagination-item a {
  color: #e6f7ff;
}
.ant-pagination-jump-prev
  .ant-pagination-item-container
  .ant-pagination-item-ellipsis,
.ant-pagination-jump-next
  .ant-pagination-item-container
  .ant-pagination-item-ellipsis {
  color: #e6f7ff;
}
</style>

